<template>
  <div class="container">
    <div class="search-box">
      <el-input v-model="searchKey"
                class="search"
                placeholder="请输入内容" />
      <el-button class="btn"
                 type="primary"
                 @click.native="searchByHand">搜索</el-button>
      <div id="searchTip"
           class="tip-box" />
    </div>
    <!--
        amap-manager： 地图管理对象
        vid：地图容器节点的ID
        zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
        center： 地图中心点坐标值
        plugin：地图使用的插件
        events： 事件
      -->
    <!-- <el-amap class="amap-box"
             :amap-manager="amapManager"
             :vid="'amap-vue'"
             :zoom="zoom"
             :plugin="plugin"
             :center="center"
             :events="events"
    > -->
    <!-- 标记 -->
    <!-- <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker" /> -->
    <!-- 比例尺 -->
    <!-- <el-amap-control-scale visible="true" />
      <el-amap-control-tool-bar :visible="true" />
    </el-amap> -->
    <el-amap view-mode="3D"
             :pitch="pitch"
             :show-label="false"
             :center="center"
             :zoom="zoom"
             class="amap-demo"
             @click="clickmap">
      <!-- 出发-点标记 -->
      <el-amap-marker v-for="(marker1,index) in markers_start"
                      :key="index"
                      :position="marker1.position"
                      :offset="[-10,-10]"
                      :icon="marker1.icon"
                      :z-index="13"
                      @mouseover="(e) => {mouseoverMarker(marker1, e)}"
                      @mouseout="mouseoutMarker" />
      <!-- 目的-点标记 -->
      <el-amap-marker v-for="(marker2, index) in markers_end"
                      :key="index"
                      :position="marker2.position"
                      :offset="[-10,-10]"
                      :icon="require('../../assets/images/end.png')"
                      :z-index="12"
                      @mouseover="(e) => {mouseoverMarker(marker2, e)}"
                      @mouseout="mouseoutMarker" />
      <el-amap-marker :position="testmarker" />
      <!-- 信息窗体 -->
      <el-amap-info-window :visible="visible"
                           :position="marker_position"
                           :offset="[1,-10]"
                           :auto-move="true"
                           @mouseover="mouseoverWindow"
                           @mouseout="mouseoutWindow">
        <div>订单编号：{{ window_info.id }}</div>
        <div>出发地：{{ window_info.start_point_name }}</div>
        <div>目的地：{{ window_info.end_point_name }}</div>
        <div>计划到达：{{ window_info.eta_time }}</div>
        <div>坐标：{{ window_info.position }}</div>
      </el-amap-info-window>
      <!-- 飞线 -->
      <el-amap-loca @init="initLoca">
        <el-amap-loca-pulse-link :visible="visible_loca"
                                 :depth="true"
                                 :source-data="sourceData"
                                 :layer-style="layerStyle" />
      </el-amap-loca>
      <!-- 比例尺 -->
      <el-amap-control-scale :visible="true" />
      <!-- 放大缩小工具 -->
      <!-- <el-amap-control-tool-bar :visible="true" /> -->
      <!-- 指南针 -->
      <!-- <el-amap-control-control-bar :visible="true" /> -->
      <!-- 地图类型切换 -->
      <el-amap-control-map-type :visible="true" />
      <!-- 鹰眼控件 -->
      <el-amap-control-hawk-eye :visible="true" />
    </el-amap>
    <!-- 订单状态分类 -->
    <div class="info-container">
      <el-tabs type="border-card">
        <el-tab-pane label="在途订单">
          <div class="tab-box">
            <div v-for="(i, k) in orderList"
                 :key="k"
                 class="info-box">
              <el-card class="box-card"
                       @click.native="getstatuslist(i)">
                <div class="statuscolor"
                     :class="setcolor(i)" />
                <div class="label">{{ i.label }}</div>
                <div class="info"
                     style="margin-left:18px">{{ i.total }}</div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
// import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
import mapApi from '@/api/map'
import axios from 'axios'
import en from 'element-ui/lib/locale/lang/en'
export default {
  data () {
    return {
      searchKey: '',
      center: [105.557761, 34.527208],
      zoom: 4.8,
      // 点标记
      markers_end: [
        // {
        //   position: [121.5273285, 31.21515044],
        //   id: 1
        // },
      ],
      markers_start: [
        // {
        //   position: ['113', '23'],
        //   id: 1
        // }
      ],
      // 注：顺序别改
      markers_start_icon: [
        require('../../assets/images/start_blue.png'),
        require('../../assets/images/start_green.png'),
        require('../../assets/images/start_yellow.png')
      ],
      // 测试点标记
      testmarker: [123, 25],
      // 信息窗体
      visible: false,
      marker_position: [111.5273285, 28.21515044],
      window_info: {
        id: '',
        start_point_name: '',
        end_point_name: '',
        eta_time: '',
        position: ''
      },
      // 飞线
      visible_loca: true,
      // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
      sourceData: {
        type: 'FeatureCollection',
        features: [
          // {
          //   type: 'Feature',
          //   properties: {
          //     type: 0,
          //     ratio: 0.0369,
          //     lineWidthRatio: 1
          //   },
          //   geometry: {
          //     type: 'LineString',
          //     coordinates: [
          //       [113, 23],
          //       [121.5273285, 31.21515044]
          //     ]
          //   }
          // }
        ]
      },
      // 原来数据，为了方便筛选操作，特别是多次筛选
      data: [],
      // 原来数据备份，为了方便筛选后还原原来数据
      Start: [],
      End: [],
      Source: {
        type: 'FeatureCollection',
        features: []
      },
      layerStyle: {
        unit: 'meter',
        dash: [40000, 0, 40000, 0],
        lineWidth: function () {
          return [10000, 2000]
        },
        height: function (index, feat) {
          return feat.distance / 3 + 10
        },
        // altitude: 1000,
        smoothSteps: 30,
        speed: function (index, prop) {
          return 1000 + Math.random() * 200000
        },
        flowLength: 100000,
        lineColors: function (index, feat) {
          return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)']
        },
        maxHeightScale: 0.3, // 弧顶位置比例
        headColor: 'rgba(255, 255, 0, 1)',
        trailColor: 'rgba(255, 255,0,0)'
      },
      // 订单分类 顺序不能变
      orderList: [
        {
          label: '运输中',
          total: 999
        },
        {
          label: '已到达',
          total: 999
        },
        {
          label: '未出发',
          total: 999
        }
      ]
    }
  },
  watch: {
    // testmarker (newVal, oldVal) {
    //   // 监听 num 属性的数据变化
    //   // 作用 : 只要 num 的值发生变化,这个方法就会被调用
    //   // 第一个参数 : 新值
    //   // 第二个参数 : 旧值,之前的值
    //   console.log('oldVal:', oldVal)
    //   console.log('newVal:', newVal)
    // }
  },
  async created () {
    await this.getData()
  },
  methods: {
    async getData () {
      let arr1 = []
      let arr2 = []
      const startmarker = []
      const endmarker = []
      const features = []
      await mapApi.getorder()
        .then(response => { // 请求成功
          console.log(response)
          this.orderList[0].total = response.status2
          this.orderList[1].total = response.status3
          this.orderList[2].total = response.status1
          // 保留一套源数据
          this.data = response.mapdata
          const mapdata = response.mapdata
          for (let i = 0; i < mapdata.length; i++) {
            // 注：这个接口服务配额最高允许每秒200次，所以以后订单超过200个就会有延迟响应
            axios.get('http://restapi.amap.com/v3/geocode/geo', {
              params: {
                // key: '2b0389807a3e44e3edc7d32b6109c42c', //潮
                key: 'cfcf805e7d9529b4befea2c00c8c2f6f',
                address: mapdata[i].start_point_name
              }
            }).then(res => {
              arr1 = res.data.geocodes[0].location.split(',')
              // 这里占用start_point的字段，因为不想又新建数据表字段，加上这里start_point是不使用的
              this.data[i].start_point = arr1
              startmarker.push({
                position: arr1,
                id: mapdata[i].order_id,
                start_point_name: mapdata[i].start_point_name,
                end_point_name: mapdata[i].end_point_name,
                eta_time: mapdata[i].eta_time,
                order_status: mapdata[i].order_status,
                icon: this.setmarkericon(mapdata[i])
              })
            })
            axios.get('http://restapi.amap.com/v3/geocode/geo', {
              params: {
                // key: '2b0389807a3e44e3edc7d32b6109c42c', //潮
                key: 'cfcf805e7d9529b4befea2c00c8c2f6f',
                address: mapdata[i].end_point_name
              }
            }).then(res => {
              arr2 = res.data.geocodes[0].location.split(',')
              // 这里占用start_point的字段，因为不想又新建数据表字段，加上这里start_point是不使用的
              this.data[i].end_point = arr2
              endmarker.push({
                position: arr2,
                id: mapdata[i].order_id,
                start_point_name: mapdata[i].start_point_name,
                end_point_name: mapdata[i].end_point_name,
                eta_time: mapdata[i].eta_time,
                order_status: mapdata[i].order_status
              })
              features.push({
                type: 'Feature',
                properties: {
                  type: 0,
                  ratio: 0.0369,
                  lineWidthRatio: 1
                },
                geometry: {
                  type: 'LineString',
                  coordinates: [arr1, arr2]
                }
              })
            })
          }
          // 等所有的marker_start都添加完之后
          this.markers_start = this.Start = startmarker
          this.markers_end = this.End = endmarker
          this.sourceData.features = this.Source.features = features
          // console.log('保留的源数据', this.data)
          // console.log('addressArr', this.markers_start)
          // console.log('markers_end', this.markers_end)
          // console.log('sourceData', this.sourceData)
        })
    },
    // 点击地图刷新原来的数据
    clickmap () {
      this.markers_start = this.Start
      this.markers_end = this.End
      this.sourceData.features = this.Source.features
    },
    // 目前只允许订单编号查询
    searchByHand () {
      if (this.searchKey !== '') {
        console.log('搜索', this.searchKey)
        // this.getlnglat(this.searchKey)
        // console.log(this.info)
        const arr = this.data
        const start = []
        const end = []
        const features = []
        let isnull
        for (let i = 0; i < arr.length; i++) {
          if (this.searchKey == arr[i].order_id) {
            isnull = true
            start.push({
              position: arr[i].start_point,
              id: arr[i].order_id,
              start_point_name: arr[i].start_point_name,
              end_point_name: arr[i].end_point_name,
              eta_time: arr[i].eta_time,
              order_status: arr[i].order_status,
              icon: this.setmarkericon(arr[i])
            })
            end.push({
              position: arr[i].end_point,
              id: arr[i].order_id,
              start_point_name: arr[i].start_point_name,
              end_point_name: arr[i].end_point_name,
              eta_time: arr[i].eta_time,
              order_status: arr[i].order_status
            })
            features.push({
              type: 'Feature',
              properties: {
                type: 0,
                ratio: 0.0369,
                lineWidthRatio: 1
              },
              geometry: {
                type: 'LineString',
                coordinates: [arr[i].start_point, arr[i].end_point]
              }
            })
            this.markers_start = start
            this.markers_end = end
            this.sourceData.features = features
          } else {
            isnull = false
          }
        }
        if (isnull) {
          this.$message({
            type: 'success',
            message: `查询成功`
          })
        } else {
          this.$message({
            type: 'warning',
            message: `订单不存在!`
          })
          this.clickmap()
        }
      }
    },
    // 点标记鼠标移入
    mouseoverMarker (marker) {
      // alert(`点击了标号,标号ID： ${marker.id}`)
      this.visible = true
      this.marker_position = marker.position
      this.window_info.id = marker.id
      this.window_info.start_point_name = marker.start_point_name
      this.window_info.end_point_name = marker.end_point_name
      this.window_info.eta_time = marker.eta_time
      this.window_info.position = marker.position
    },
    // 点标记鼠标移出
    mouseoutMarker () {
      this.visible = false
    },
    mouseoverWindow () {
      this.visible = true
    },
    mouseoutWindow () {
      this.visible = false
    },
    // 获取某状态的数据
    getstatuslist (i) {
      const start = []
      const end = []
      const features = []
      switch (i.label) {
        case '运输中':
          for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].order_status === '2') {
              start.push({
                position: this.data[i].start_point,
                id: this.data[i].order_id,
                start_point_name: this.data[i].start_point_name,
                end_point_name: this.data[i].end_point_name,
                eta_time: this.data[i].eta_time,
                order_status: this.data[i].order_status,
                icon: this.setmarkericon(this.data[i])
              })
              end.push({
                position: this.data[i].end_point,
                id: this.data[i].order_id,
                start_point_name: this.data[i].start_point_name,
                end_point_name: this.data[i].end_point_name,
                eta_time: this.data[i].eta_time,
                order_status: this.data[i].order_status
              })
              features.push({
                type: 'Feature',
                properties: {
                  type: 0,
                  ratio: 0.0369,
                  lineWidthRatio: 1
                },
                geometry: {
                  type: 'LineString',
                  coordinates: [this.data[i].start_point, this.data[i].end_point]
                }
              })
            }
          }
          this.markers_start = start
          this.markers_end = end
          this.sourceData.features = features
          break
        case '已到达':
          for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].order_status === '3') {
              start.push({
                position: this.data[i].start_point,
                id: this.data[i].order_id,
                start_point_name: this.data[i].start_point_name,
                end_point_name: this.data[i].end_point_name,
                eta_time: this.data[i].eta_time,
                order_status: this.data[i].order_status,
                icon: this.setmarkericon(this.data[i])
              })
              end.push({
                position: this.data[i].end_point,
                id: this.data[i].order_id,
                start_point_name: this.data[i].start_point_name,
                end_point_name: this.data[i].end_point_name,
                eta_time: this.data[i].eta_time,
                order_status: this.data[i].order_status
              })
              features.push({
                type: 'Feature',
                properties: {
                  type: 0,
                  ratio: 0.0369,
                  lineWidthRatio: 1
                },
                geometry: {
                  type: 'LineString',
                  coordinates: [this.data[i].start_point, this.data[i].end_point]
                }
              })
            }
          }
          this.markers_start = start
          this.markers_end = end
          this.sourceData.features = features
          break
        case '未出发':
          for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].order_status === null || this.data[i].order_status === '0' || this.data[i].order_status === '1') {
              start.push({
                position: this.data[i].start_point,
                id: this.data[i].order_id,
                start_point_name: this.data[i].start_point_name,
                end_point_name: this.data[i].end_point_name,
                eta_time: this.data[i].eta_time,
                order_status: this.data[i].order_status,
                icon: this.setmarkericon(this.data[i])
              })
              end.push({
                position: this.data[i].end_point,
                id: this.data[i].order_id,
                start_point_name: this.data[i].start_point_name,
                end_point_name: this.data[i].end_point_name,
                eta_time: this.data[i].eta_time,
                order_status: this.data[i].order_status
              })
              features.push({
                type: 'Feature',
                properties: {
                  type: 0,
                  ratio: 0.0369,
                  lineWidthRatio: 1
                },
                geometry: {
                  type: 'LineString',
                  coordinates: [this.data[i].start_point, this.data[i].end_point]
                }
              })
            }
          }
          this.markers_start = start
          this.markers_end = end
          this.sourceData.features = features
          break
        default:
          break
      }
    },
    // 设置状态颜色
    setcolor (item) {
      let color = ''
      if (item.label === '运输中') {
        color = 'blue'
      } else if (item.label === '已到达') {
        color = 'green'
      } else {
        color = 'yellow'
      }
      return color
    },
    setmarkericon (item) {
      // console.log('item:', item)
      if (item.order_status === null || item.order_status === '0' || item.order_status === '1') {
        return this.markers_start_icon[2]
      } else if (item.order_status === '2') {
        return this.markers_start_icon[0]
      } else if (item.order_status === '3') {
        return this.markers_start_icon[1]
      }
    },
    initLoca (loca) {
      loca.animate.start()
    },
    getlnglat (data) {
      axios.get('http://restapi.amap.com/v3/geocode/geo', {
        params: {
          // key: '2b0389807a3e44e3edc7d32b6109c42c', //潮
          key: 'cfcf805e7d9529b4befea2c00c8c2f6f',
          address: data
        }
      }).then(res => {
        console.log(res.data.geocodes[0].location.split(','))
        this.testmarker = res.data.geocodes[0].location.split(',')
      })
    }

  }

}
// }
</script>
<style lang="css" scope>
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.search-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 35%;
  top: 20px;
  height: 30px;
}
.search-box .search {
  float: left;
  width: 80%;
  height: 100%;
  padding: 0 8px;
  outline: none;
}
.search-box .btn {
  float: left;
  width: 20%;
  /* height: 100%; */
  /* background: #30ccc1; */
  /* border: 1px solid #30ccc1; */
  color: #fff;
  outline: none;
}
.tip-box {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}

.info-container {
  position: absolute;
  width: 35%;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  /* border: 2px solid rebeccapurple; */
  /* border-radius: 20px; */
  /* ::v-deep .el-tabs--border-card {
    background-color: rgba(255, 255, 255, 0.9);
  }
  ::v-deep .el-tabs--border-card {
    border: none;
    border-radius: 6px;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: none;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    border: none;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__header {
    background-color: transparent;
    border-bottom: 1px solid $partLine;
  }
  ::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 2rem;
  }
  ::v-deep .el-tab-pane {
    background-color: transparent;
  }
  */

  /* ::v-deep .el-tabs__nav {
    width: 100%;
    display: flex;
  }
  ::v-deep .el-tabs__nav .el-tabs__item {
    flex: 1;
    border-radius: 4px 4px 0 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: $secondaryContent;
    width: 27.5rem;
    height: 4.4rem;
    background-color: transparent;
    line-height: 4.4rem;
    text-align: center;
  }
  ::v-deep .el-tabs__nav .is-active {
    font-weight: 600;
    color: #2979ff;
    border-bottom: 3px solid #2979ff !important;
  } */
}
.tab-box {
  width: 100%;
  height: 70px;
  display: flex;
}
.info-box {
  /* display: flex;
  justify-content: center; */
  text-align: center;
  width: 100%;
}
.box-card {
  display: inline-block;
  width: 90%;
  height: 70px;
  border-radius: 7px;
}
.el-card__body {
  padding: 20px 20px 20px 10px;
  display: flex;
  font-size: 20px;
  cursor: pointer;
}
.box-card :hover {
  border: 2px solid #7db9ff;
}
.statuscolor {
  /* background: red; */
  width: 10px;
  height: 30px;
  line-height: 30px;
  margin-right: 20px;
  border-radius: 5px;
}
.orange {
  background-color: #fd8244;
}
.red {
  background-color: #fb0828;
}
.yellow {
  background-color: #fbce65;
}
.blue {
  background-color: #7db9ff;
}
.green {
  background-color: #88d18a;
}

.el-tabs__nav-scroll {
  display: grid;
}
.el-tabs__nav-wrap {
  text-align: center;
}
.el-tabs--border-card > .el-tabs__header {
  border-bottom: 2px solid #6287d1;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
}
</style>
